<template>
  <div class="grxx">
    <van-sticky>
      <Header title="个人信息"/>
    </van-sticky>

    <div class="content">

      <div v-if="data.userType === 'stud' ">
        <van-cell-group>
          <van-cell>
            <div class="h_img">
              <img
                  :src="eduUrl+'/jwfilepath/StudentPhotos/' + data.userId % 100 + '/' + data.userId + '.jpg'"
                  alt="图片未正常加载！">
            </div>

            <div class="text">
              <p class="stuName">{{ data.userName }}</p>
              <p class="stuNum">学号：{{ data.number }}</p>
            </div>
          </van-cell>

          <van-cell>
            <div class="zxf">
              <img src="/src/image/grxx_icon_class.png" alt="" class="xskq_img">
              <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px; color: #888888;">班级:</span>
            </div>
            <template v-slot:right-icon>
              <div class="text_right">{{ data.className }}</div>
            </template>
          </van-cell>

          <van-cell>
            <div class="zxf">
              <img src="/src/image/grxx_icon_lqh.png" alt="" class="xskq_img">
              <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px; color: #888888;">录取号:</span>
            </div>
            <template v-slot:right-icon>
              <div class="text_right">{{ data.userId }}</div>
            </template>
          </van-cell>

          <van-cell>
            <div class="zxf">
              <img src="/src/image/grxx_icon_xz.png" alt="" class="xskq_img">
              <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px;color: #888888;">学制:</span>
            </div>
            <template v-slot:right-icon>
              <div class="text_right">{{ data.catName }}</div>
            </template>
          </van-cell>

          <van-cell>
            <div class="zxf">
              <img src="/src/image/grxx_icon_stuId.png" alt="" class="xskq_img">
              <span style="font-size: 1.1rem; vertical-align: middle; margin-left: 5px;  color: #888888;">专业:</span>
            </div>
            <template v-slot:right-icon>
              <div class="text_right">{{ data.specialName }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <div v-else>
        <van-cell-group>
          <van-cell>
            <div class="zxf">
              <span style="font-size: 4vw; vertical-align: middle; margin-left: 5px; color: #888888;">姓名:</span>
            </div>
            <template v-slot:right-icon>
              <div class="text_right">{{ data.userName }}</div>
            </template>
          </van-cell>

          <van-cell>
            <div class="zxf">
              <span style="font-size: 4vw; vertical-align: middle; margin-left: 5px; color: #888888;">学院:</span>
            </div>
            <template v-slot:right-icon>
              <div class="text_right">{{ data.collegeName }}</div>
            </template>
          </van-cell>
        </van-cell-group>
      </div>

      <van-button round plain v-if="data.flagL === 1" @click="exit()" type="primary" block>取消绑定</van-button>
      <van-button round plain v-else @click="exit()" type="primary" block>退出</van-button>

    </div>
  </div>
</template>

<script setup>

import Header from "/@/components/Header/Header.vue";
import {useUserStore} from "/@/store/modules/user";
import {Dialog} from "vant";
import wx from "weixin-js-sdk";
import {logoutByOpenid,getEduUrl} from "/@/api";

const data = reactive({
  userId: null,
  userType: '',
  specialName: '',
  className: '',
  catName: '',
  number: '',
  userName: '',
  collegeName: '',
  flagL: 0,
})

const eduUrl=getEduUrl();

function initFlag() {
  const flag = localStorage.getItem('openIdFlag');
  if (flag === "isOpen") {
    data.flagL = 1;
  }
}

function exit() {
  const flag = localStorage.getItem('openIdFlag');
  if (flag === "noOpen") {
    Dialog.confirm({
      message: '确认退出教务系统?',
    }).then(() => {
      wx.closeWindow();
    })
  }else if(flag === "isOpen"){
    Dialog.confirm({
      message: '确认取消绑定?',
    }).then(async () => {
      const ret = await logoutByOpenid();
      if(200 === ret.response.value.code){
        wx.closeWindow();
      }
    })
  }

}

onMounted(() => {
  initFlag();
})

const object = JSON.parse(localStorage.getItem('USERINFO'));
//console.log('USERINFO', object);

data.userType = localStorage.getItem("userType");
if (data.userType === 'tea'){
  data.userName = object.teacher.name;
  data.collegeName = object.teacher.collegeName;
}else{
  data.userName = object.stud.name;
  data.className = object.stud.className;
  data.number = object.stud.number;
  data.specialName = object.specialName;
  data.userId = object.stud.id;
  data.catName = object.catName;
}

</script>

<style scoped lang="less">
.grxx {
  .content {
    margin: 5px 15px;
    .h_img {
      display: inline-block;
      border: 1px solid #fff;
      width: 110px;
      height: 110px;
      overflow: hidden;
      vertical-align: middle;
      border-radius: 50%;

      img {
        width: 110px;
        border-radius: 40%;
        box-shadow: 0 0 2px #fff;
      }
    }

    .text {
      margin-left: 24px;

      .stuName {
        font-weight: 400;
        font-size: 1.2rem;
        margin-top: 10px
      }

      .stuNum {
        font-weight: 400;
        font-size: 1rem;
        color: #888888;
      }
    }

    .zxf {
      .xskq_img {
        width: 44px !important;
        height: 44px !important;
        vertical-align: middle;
      }
    }
  }
}

.text_right {
  font-size: 4vw;
  color: black;
  margin-right: 10px;
}

/deep/ .van-cell {
  margin: 0 0 10px 0;
}

/deep/ .van-cell__value--alone {
  display: flex;
}

/deep/ van-divider van-divider--hairline {
  color: #888888;
}
</style>
